<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()
defineProps({
  goods: {
    type: Object
  }
})

/**
 *  跳转到详情页
 * @param goods 商品
 */
const goDetail = (goods) => {
  console.log(router)
  router.push({
    path: '/detail',
    query: {
      goods: JSON.stringify(goods)
}
})
}
</script>

<template>
  <div class="goods-item" @click="goDetail(goods)">
    <el-image :src="goods.proImg" fit="cover" class="img"></el-image>
    <div>{{ goods.proMess.slice(0,10) }}</div>
  </div>
</template>

<style lang="scss" scoped>
.goods-item {
  border-radius: 5px;
  width: 200px;
  height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.2s ease-in-out;
  gap: 20px;

  &:hover {
    cursor: pointer;
    transform: scale3d(1.02, 1.02, 1);
    box-shadow: 5px 5px 5px 5px #eee;
  }
  .img{
    width: 100%;
    height: 70%;
  }
}
</style>